<template>
  <transition>
    <div class="passport" v-show="$store.state.show">
        <div  class="closeer" style=" float: right;">
          <img src="../../assets/icon/x-lg.svg" alt="关闭" style="cursor: pointer;margin:10px 10px; display: block;" >
        </div>
        <div class="passport-inner">
            <div class="mode">
                <div class="mode-inner">
                  <h3 class="nopwdlink" :style="{opacity:style.noneedpwd.opacity}" @click="nopwdchange">免密登录</h3>
                  <h3 class="pwdlink" style="margin-left: 80px;" :style="{opacity:style.needpwd.opacity}"  @click="pwdchange">密码登录</h3>
                </div>
            </div>
            <!-- 输入 -->
            <div class="inputs" >
              <!-- 免密登录 -->
                <div class="login no-pwd" v-if="type ==='nopwd'">
                  <input class="inputer" type="text" placeholder="手机号" style="width: 95%;height: 30px;" v-model.number.trim="Nopwd.phone">
                  <input class="inputer" type="text" placeholder="6位数字验证码" style="width: 70%;height: 30px; margin-top: 25px;" v-model.number.trim="Nopwd.code" >
                  <span class="codeCounter" @click="getcode" style="cursor: pointer;" v-if="showGetcode==='pass'">获取验证码</span>
                  <span class="codeCounter"  style="cursor: default; opacity: 0.5; font-size: small; position: absolute;right: 20px;top: 167px;" v-else-if="showGetcode==='wait'">
                    {{Nopwd.count}}s后重新获取</span>
                  <br><br>
                  <span class="errorMsg" v-if="errorType ==='nummberWrong'">手机格式不正确</span>
                  <span class="errorMsg" v-else-if="errorType ==='codeWrong'" >验证码错误,请重新输入</span>
                  <input  class="btn-login nopwdLogin" type="button" value="登录/注册" :style="{opacity:style.btnlogin.opacity}" @click="nopwdLogin">
                </div>
             <!-- 密码登录 -->
                <div class="login havepwd" v-else-if="type ==='havepwd'">
                  <input class="inputer" type="text" placeholder="手机号/邮箱/用户名" style="width: 95%;height: 30px;" v-model.number.trim="havapwd.account">
                  <input class="inputer" type="password" placeholder="密码" style="width: 70%;height: 30px; margin-top: 25px;" v-model.number.trim="havapwd.pwd" >
                  <input  class="btn-login  pwdLogin" type="button" value="登录" :style="{opacity:style.btnlogin.opacity}">
                </div>

            </div>



            
        </div>
        
    </div>
  </transition>
</template>

<script>




// import axios from 'axios'
import {nopwdLogin1} from "@/api/login"
export default {
     name:"Passport",
     data() {
        return {
          // 样式属性
           style:{
            btnlogin:{
              opacity:"0.6"
            },
            needpwd:{
              opacity:"0.4"
            },
            noneedpwd:{
              opacity:"1"
            }
            
           },
          // 数据属性 
           Nopwd:{
             rightphone:/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
             phone:"",
             code:"",
             realcode:"",
             phoneCorrect:"",
             count:10
           },
           havapwd:{
             account:"",
             pwd:"",
            
           },
           //定时器
           timers:{
            timer1:""

           },
           //v-if的判断都在这里
           type:"nopwd",
           errorType:"",
           showGetcode:"pass"
            
          
          
      
          
        }
     },
     methods:{
      nopwdchange(){
        this.style.noneedpwd.opacity="1";
        this.style.needpwd.opacity="0.4";
        this.type="nopwd";
        this.errorType="";
        this.Nopwd.phone="";
        this.Nopwd.code="";
      },
      pwdchange(){
        this.style.needpwd.opacity="1";
        this.style.noneedpwd.opacity="0.4";
        this.type="havepwd"
        this.havapwd.account="";
        this.havapwd.pwd="";
        this.showGetcode="pass"
        //切换时及时关闭定时器
        if(this.timers.timer1!==""){
          clearInterval(this.timers.timer1)
        }
       
      },
      //获取验证码
      getcode(){
          if(this.Nopwd.phone!==""){
            // 正则表达式验证手机号是否规范
           this.Nopwd.phoneCorrect= this.Nopwd.rightphone.test(this.Nopwd.phone);
           if(this.Nopwd.phoneCorrect){
            //生成6位验证码
              this.Nopwd.realcode =Math.random().toFixed(6).slice(-6);
              console.log("手机验证码为："+this.Nopwd.realcode);
              this.errorType=""
              //
              this.showGetcode="wait";
              this.timers.timer1=setInterval(()=>{
               
                  this.Nopwd.count--;
                  if(this.Nopwd.count==0){
                    clearInterval(this.timers.timer1)
                    this.showGetcode="pass";
                    this.Nopwd.count=10;
                  }
                 }, 1000);

              
           }else{
            this.errorType="nummberWrong"
           } 
             this.Nopwd.code= this.Nopwd.realcode
          }
         
      },
      //免密登录
      nopwdLogin(){
        if(this.style.btnlogin.opacity=="1"){
        //再次验证手机号是否符合规范
        this.Nopwd.phoneCorrect= this.Nopwd.rightphone.test(this.Nopwd.phone);
        if(this.Nopwd.phoneCorrect){
         
          if(this.Nopwd.realcode==this.Nopwd.code){
            this.errorType=""
      //发送请求
           nopwdLogin1(this.Nopwd.phone).then(res=>{
            if(res){
              this.$store.commit("SHOW",false);
              setTimeout(()=>{
                window.location.href="index.html";
              },1000)
            }
              
           });
        
   

            
          console.log("验证码匹配");
         }else{
          this.errorType="codeWrong"
         }
      }else{
        this.errorType="nummberWrong"
      }
    }     
      }
     },
     computed:{
      //用来计算手机号与验证码是或否都有值,都有值返回true
      confirm:function() {
        if(this.Nopwd.phone!==""&&this.Nopwd.code!==""||this.havapwd.account!==""&&this.havapwd.pwd!==""){
          return true;
        }
        
      }
         
     },
     watch:{
      //如果 sum的值为true 高亮显示登录/注册按钮 否则反之
      confirm(v1){
          if(v1){
             this.style.btnlogin.opacity="1"
          }else{
            this.style.btnlogin.opacity="0.6"
          }

       },

  
         
     },
    
  

}
</script>

<style>
div{
  box-sizing: border-box;
}
@keyframes show {
  from{
    opacity: 0;
  }to{
  opacity: 1;
     }
}
.v-enter-active{
animation: show 1s ease;
}
.v-leave-active{
  animation: show 0.1s reverse;
}
.passport{
position: fixed;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 400px;
height: 500px;
background-color: black;
z-index: 4;
border-radius:0.7ch ;
background-color: white;
overflow: hidden;
}
.passport-inner{
  width: 340px;
  left: 30px;
  height: 420px;
  margin-top:30px ;
  /* background-color: red; */
  position: relative;
  top: 30px;
  padding-top: 15px;
}
.passport-inner .mode-inner{
  width: 100%;
  height: 100%;
  position: relative;
  /* background-color: blue; */
  line-height: 50px;
  padding-left:50px ;  
}
.mode-inner h3{
    display: inline;
    cursor: pointer;
    
}
.passport-inner .inputs{
  width: 100%;
  height: 100%;
}
.passport-inner .inputs .login{
  width: 100%;
  height: 300px;
  /* background-color: aquamarine; */
  margin-top: 40px;
}
.passport-inner .inputs .login .inputer{
  margin-left: 20px;
  border: none;
  font-size: medium;
}
.passport-inner .inputs .login .inputer:focus{
   outline: none;
}
.errorMsg{
font-size: small;
color: red;
margin-left: 18px;
margin-top: 30px;
z-index: 2;
}
.btn-login{
  /* margin-top: 60px; */
  position: relative;
  top:50px;
  color: white;
  background-color: rgb(123, 200, 8);
  border: none;
  height: 50px;
  border-radius: 4ch;
  width: 100%;
  font-size: medium;
}
</style>